<template>
  <div id="app">
    <div>
      条件选择区域：
      <Gender :genders="selections.genders" @onSelectGender="selectGenderHandler"></Gender>
      <Color :colors="selections.colors" @onSelectColor="selectColorHandler"></Color>

      <div>
        <p>
          <span>搜索到 {{list.length}}个</span>
          <button @click="search">搜索</button>
        </p>
        <Page ref="page" @onPageChange="pageChanageHandler" :recordSize="list.length" :pageSize="pageSize" v-show="list.length>0" ></Page>
        <div v-for="item in filterList" :key="item.id">
          {{item.title}}
          <img :src="item.img" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Gender from "./components/Shoes/Gender";
import Color from "./components/Shoes/Color";
import Page from './components/Page'
export default {
  name: "App",
  data() {
    return {
      page:1,
      pageSize:15,
      filterList:[],
      list: [],
      list_origin: [],
      list_search:[],
      selections: {
        genders: [],
        colors: [],
      },
      selected: {
        color: "",
        gender: "",
      },
    };
  },
  components: {
    Gender,
    Color,
    Page
  },
  created() {
    this.getList().then((res) => {
       this.list_origin=[...res.list];
       this.list_search=[...res.list];
       this.filterList=this.list.slice((this.page-1)*15,this.page*15);
       console.log('created getList res.list',res.list)
        this.$refs.page.refreshPageNumber();
    });
  },
  methods: {
    getList() {
      return axios.get("/api/products").then((res) => {
        this.list = res.data.data.list;
        this.selections = res.data.data.selections;
        return Promise.resolve(res.data.data);
      });
    },

    selectColorHandler(e) {
      console.log("selectColorHandler e", e);
      this.selected.color = e;
      this.search();
    },
    selectGenderHandler(e) {
      this.selected.gender = e;
      this.search();
    },
    pageChanageHandler(e){
      this.page=e;
      this.filterList=this.list.slice((this.page-1)*15,this.page*15);
      console.log('this.filterlist',this.filterList);
      console.log('this.list',this.list);

    },
    search() {
      this.list_search=[...this.list_origin];
      
      if(this.selected.gender){
         this.list_search=this.list_search.filter((item)=>item.gender===this.selected.gender);
         console.log('search this.list',this.list);
       }

       if(this.selected.color){
         this.list_search=this.list_search.filter((item)=>item.color===this.selected.color)
       }


       this.list=this.list_search;
       let from=(this.page-1)*15;
       let to=this.page*15;
       if(this.list.length<this.pageSize) {
         to=this.list.length;
       }
       this.filterList=this.list.slice(from,to);
      this.$nextTick(function(){
        console.log('this.refs',this.$refs);
        this.$refs.page.refreshPageNumber();
      })
       console.log('this.list',this.list);
       console.log('this.filterList',this.filterList);
     

       
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
